<template>
	<view class="channel">
		<u-sticky>
			<view class="sticky">
				<view class="play-box">
					<video class="player" id="player" :autoplay="true" :src="url" :title="current.name"
					enable-play-gesture :play-strategy="2"
						:initial-time="initialtime" @timeupdate="videoTimeUpdateEvent"></video>
				</view>
				<u-cell-item :arrow="false">
					<view slot="title">
						<text selectable>频道列表</text>
					</view>
					<text>来源：</text>
					<text>{{ site.name }}</text>
				</u-cell-item>
			</view>
		</u-sticky>
		<mescroll-body ref="mescrollRef" @down="downCallback" :bottombar="false" :down="downOption" :sticky="false"
			@up="upCallback" :up="upOption" @init="mescrollInit">
			<view class="channel-list">
				<view class="channel-item" v-for="(item,index) in playList" :key="index"
					:class="[item==current?'play-active':'']" @click="handlePlay(item)">
					<u-image src="/static/images/face.jpg" border-radius="5px" width="150upx" mode="widthFix"></u-image>
					<view class="title">
						<text>{{ item.name }}</text>
					</view>
				</view>
			</view>
		</mescroll-body>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import MescrollMixin from "@/libs/mescroll-uni/components/mescroll-uni/mescroll-mixins.js"
	import http from "@/utils/request.js"
	import Tools from "@/utils/tools.js"
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				current: {
					name: ''
				},
				currentGroup: 0,
				listQuery: {
					page: 1,
					pageSize: 20
				},
				initialtime: 0,
				site: {
					name: '未知'
				},
				url: '',
				playShow: false,
				channelList: [],
				playList: [],
				videoUpdateCounter: 0,
				videoCtx: null,
				downOption: {
					use: true,
					auto: true
				},
				upOption: {
					page: {
						num: 0,
						size: 20,
						time: null
					},
					empty: {
						use: true,
						icon: null,
						tip: "暂无数据",
						fixed: false,
						top: "560rpx",
					},
					textNoMore: '没有更多数据',
					toTop: {
						warpId: null,
						src: null,
						html: null,
						offset: 1000,
						warpClass: "mescroll-totop",
						showClass: "mescroll-fade-in",
						hideClass: "mescroll-fade-out",
						duration: 300,
						supportTap: false,
						btnClick: null
					}
				}
			}
		},
		onHide() {
			if (this.videoCtx) {
				this.videoCtx.stop()
			}
			// console.log('onHide')
		},
		mounted() {
			this.videoCtx = uni.createVideoContext('player', this)
			// console.log(this.videoCtx)
		},
		created() {
      this.site.name = this.defcku.name
		},
		methods: {
			async videoTimeUpdateEvent(e) {
				// 播放进度变化时触发timeupdate，event.detail = {currentTime, duration} 。触发频率 250ms 一次
				this.videoUpdateCounter += 1
				if (this.videoUpdateCounter % 40 === 0) {
					// 每10秒更新一下历史记录的时间进度
					this.videoUpdateCounter = 0
					// await this.updateHistory(e.detail)
				}
			},
			fetchData() {
				let list = this.defcku.channel
				let start = (this.listQuery.page - 1) * this.listQuery.pageSize
				let end = this.listQuery.page * this.listQuery.pageSize
				if (start == 0) {
					this.playList = new Array()
				}
				for (let i = start; i < end && i < list.length; i++) {
					this.playList.push(list[i])
				}
				this.mescroll.endSuccess(end, end < list.length)
				// console.log(this.playList)
				// console.log('fetchData=>' + this.listQuery.page + ',start=' + start + ',end=' + end)
			},
			upCallback(options) {
				this.listQuery.page = options.num
				this.listQuery.pageSize = options.size
				this.fetchData()
			},
			// 下拉刷新的回调 (mixin默认resetUpScroll)
			downCallback() {
				this.listQuery.page = 1
				if (this.mescroll.optUp.use) {
					this.mescroll.resetUpScroll()
				} else {
					setTimeout(() => {
						this.mescroll.endSuccess();
					}, 500)
				}
			},
			mescrollInit(mescroll) {
				this.mescroll = mescroll
			},
			async updateHistory(detail) {
				const res = await db.get('history', `${this.siteKey}-${this.id}`)
				if (res.flag) {
					res.data.currentTime = detail.currentTime
					res.data.duration = detail.duration
					await db.update('history', res.data)
				}
			},
			handlePlay(obj, index) {
				this.current = obj
				this.url = obj.url
				let title = `正在播放 ( ${ obj.name } )`
				this.$u.toast(title)
				uni.setNavigationBarTitle({ title: `正在播放 ( ${ obj.name } )` })
			},
		}
	}
</script>

<style lang="scss" scoped>
	.channel {
		.play-box {
			.player {
				width: 100vw;
				height: 35vh;
			}
		}

		.sticky {
			background-color: #FFF;
			box-sizing: border-box;
			border: 0px solid #096;
			height: 45vh;
		}

		.channel-list {
			--n: 4;
			--w: 180upx;
			border: 0px solid #0000ff;
			box-sizing: border-box;
			border-radius: 10upx;
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;

			.channel-item {
				border: 0px solid #000;
				font-size: 12px;
				height: 150upx;
				width: var(--w);
				margin: 0px calc((100%- var(--w) * var(--n))/ var(--n)/2);

				.title {
					width: 100%;
					overflow: hidden;
					text-align: center;
				}

				.u-image {
					margin: 0px auto;
				}
			}

			.play-active {
				color: #0000ff;
				// border: 1px solid #0000ff;
			}
		}

	}
</style>